<script setup>
import {reactive, ref, toRefs} from "vue";
import {useRouter} from "vue-router";
import {infoStore} from "@/stores";

const store = infoStore()
const {orderNum} = toRefs(store)
const {updateOrderNum, updateOrder, updateTotalPrice, updateProdct} = store
const base = ref(false);
const data = reactive({
    sku: [],
    goods: {}
});
const state = reactive({
    tab1value: '0',
    type: ['Apple', 'SAMSUNG', 'HUAWEI'],
    list: [
        {
            type: 'Apple',
            imgUrl:
                'https://img14.360buyimg.com/n1/s450x450_jfs/t1/17770/30/19903/46135/646f5c4bFcdf78f11/cf369691b77b4d48.jpg',
            title: 'Apple iPhone 14 Pro Max (A2896) 256GB 暗紫色 支持移动联通电信5G 双卡双待手机',
            price: '9899.00',
            shopDesc: '自营',
            delivery: '厂商配送',
            shopName: 'Apple产品京东自营旗舰店>',
            shopTag: '100万+条评论 97%好评',
            proList: ['A16', '256GB', '车祸检测'],
            goods: {
                skuId: '1', // 商品信息展示区，商品编号
                price: "9899.00", // 商品信息展示区，商品价格
                imagePath: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/17770/30/19903/46135/646f5c4bFcdf78f11/cf369691b77b4d48.jpg", // 商品信息展示区，商品图
            },
            sku: [
                {
                    id: 1,
                    name: '颜色',
                    list: [
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/114153/23/36311/42135/646f5c17F11445c84/df37c0fe3d08d455.jpg',
                            name: '深空黑色',
                            id: 100016015112,
                            active: true,
                            disable: false
                        },
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/17770/30/19903/46135/646f5c4bFcdf78f11/cf369691b77b4d48.jpg',
                            name: '暗紫色',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/217812/2/29797/44973/646f5c31F73ed6e52/370b7568bdf519a9.jpg',
                            name: '银色',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/70961/33/25945/47909/646f5bffF03763d66/be4fe0a7b39de136.jpg',
                            name: '金色',
                            id: 100016015112,
                            active: false,
                            disable: true
                        },
                    ]
                },
                {
                    id: 2,
                    name: '版本',
                    list: [
                        {
                            name: '128GB',
                            id: 100016015122,
                            price: '8999.00',
                            active: false,
                            disable: false
                        },
                        {
                            name: '256GB',
                            id: 100016015122,
                            price: '9899.00',
                            active: true,
                            disable: false
                        },
                        {
                            name: '512GB',
                            id: 100016015122,
                            price: '11699.00',
                            active: false,
                            disable: false
                        },
                        {
                            name: '1TB',
                            id: 100016015122,
                            price: '13499.00',
                            active: false,
                            disable: false
                        },
                    ]
                },
            ]
        },
        {
            type: 'Apple',
            imgUrl:
                'https://img14.360buyimg.com/n0/jfs/t1/134948/26/33039/44982/646f5eaaF10246af8/e9a5193d2dc6e5a3.jpg',
            title: 'Apple iPhone 14 Pro (A2892) 256GB 暗紫色 支持移动联通电信5G 双卡双待手机',
            price: '8899.00',
            shopDesc: '自营',
            delivery: '厂商配送',
            shopName: 'Apple产品京东自营旗舰店>',
            shopTag: '100万+条评论 97%好评',
            proList: ['A16', '256GB', 'OLED直屏'],
            goods: {
                skuId: '2', // 商品信息展示区，商品编号
                price: "8899.00", // 商品信息展示区，商品价格
                imagePath: "https://img14.360buyimg.com/n0/jfs/t1/134948/26/33039/44982/646f5eaaF10246af8/e9a5193d2dc6e5a3.jpg", // 商品信息展示区，商品图
            },
            sku: [
                {
                    id: 2,
                    name: '颜色',
                    list: [
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/121217/32/34806/42125/646f5e8dF70fa90ef/77b65c151ece90b1.jpg',
                            name: '深空黑色',
                            id: 100016015112,
                            active: true,
                            disable: false
                        },
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/202048/18/36109/46144/646f5e34Fa619302d/942ca8d1c9658a80.jpg',
                            name: '暗紫色',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/134948/26/33039/44982/646f5eaaF10246af8/e9a5193d2dc6e5a3.jpg',
                            name: '银色',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/148183/21/32464/47918/646f5e72F2114d8e7/ec1fb059ec95c140.jpg',
                            name: '金色',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                    ]
                },
                {
                    id: 2,
                    name: '版本',
                    list: [
                        {
                            price: '7999',
                            name: '128GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                        {
                            price: '8899',
                            name: '256GB',
                            id: 100016015122,
                            active: true,
                            disable: false
                        },
                        {
                            price: '10699',
                            name: '512GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                        {
                            price: '12499',
                            name: '1TB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                    ]
                },
            ]
        },
        {
            type: 'SAMSUNG',
            imgUrl:
                'https://img14.360buyimg.com/n0/jfs/t1/120633/33/32647/81641/646caa87F5f100652/a8a9159d85d535a9.jpg',
            title: '三星 SAMSUNG Galaxy S23 Ultra 超视觉夜拍 稳劲性能 大屏S Pen书写 8GB+256GB 悠野绿 5G手机',
            price: '7099.00',
            shopDesc: '自营',
            delivery: '厂商配送',
            shopName: '三星京东自营旗舰店>',
            shopTag: '2万+条评论 97%好评',
            proList: ['晓龙8', '256GB', '5000万像素'],
            goods: {
                skuId: '3', // 商品信息展示区，商品编号
                price: "7099.00", // 商品信息展示区，商品价格
                imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/120633/33/32647/81641/646caa87F5f100652/a8a9159d85d535a9.jpg'
            },
            sku: [
                {
                    id: 3,
                    name: '颜色',
                    list: [
                        {
                            name: '悠野绿',
                            id: 100016015112,
                            active: true,
                            disable: false
                        },
                        {
                            name: '悠远黑',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            name: '悠雾紫',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            name: '悠柔白',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                    ]
                },
                {
                    id: 2,
                    name: '版本',
                    list: [
                        {
                            name: '8GB+256GB',
                            id: 100016015122,
                            active: true,
                            disable: false
                        },
                        {
                            name: '16GB+256GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                        {
                            name: '12GB+512GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                        {
                            name: '12GB+1TB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                    ]
                },
            ]
        },
        {
            type: 'SAMSUNG',
            imgUrl:
                'https://img14.360buyimg.com/n0/jfs/t1/85644/16/36270/104357/646c760eF5855008d/2a829fc4686124c9.jpg',
            title: '三星 SAMSUNG 心系天下 W23 非凡陶瓷 尊奢铰链 瑰丽边框 16GB+512GB 5G折叠手机 熠金黑 附S Pen',
            price: '14699.00',
            shopDesc: '自营',
            delivery: '厂商配送',
            shopName: '三星京东自营旗舰店>',
            shopTag: '1万+条评论 97%好评',
            proList: ['非凡陶瓷', 'IPX8级防水', '专属S Pen'],
            goods: {
                skuId: '4', // 商品信息展示区，商品编号
                price: "14699.00", // 商品信息展示区，商品价格
                imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/85644/16/36270/104357/646c760eF5855008d/2a829fc4686124c9.jpg'
            },
            sku: [
                {
                    id: 4,
                    name: '颜色',
                    list: [
                        {
                            name: '熠金黑',
                            id: 100016015112,
                            active: true,
                            disable: false
                        },
                    ]
                },
                {
                    id: 2,
                    name: '版本',
                    list: [
                        {
                            name: '16GB+512GB',
                            id: 100016015122,
                            active: true,
                            disable: false
                        },
                    ]
                },
            ]
        },
        {
            type: 'HUAWEI',
            imgUrl:
                'https://img14.360buyimg.com/n0/jfs/t1/198519/4/33824/85351/646f5d39F66124b6c/076a92f719f8d8c1.jpg',
            title: '华为/HUAWEI P60 Pro 超聚光夜视长焦 昆仑玻璃 双向北斗卫星消息 256GB 羽砂黑 鸿蒙智能旗舰手机',
            price: ' 6188.00',
            shopDesc: '自营',
            delivery: '厂商配送',
            shopName: '华为京东自营旗舰店>',
            shopTag: '2万+条评论 97%好评',
            proList: ['晓龙8', '256GB', '1亿像素'],
            goods: {
                skuId: '5', // 商品信息展示区，商品编号
                price: "6188.00", // 商品信息展示区，商品价格
                imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/198519/4/33824/85351/646f5d39F66124b6c/076a92f719f8d8c1.jpg'
            },
            sku: [
                {
                    id: 5,
                    name: '颜色',
                    list: [
                        {
                            name: '羽纱黑',
                            id: 100016015112,
                            active: true,
                            disable: false
                        },
                        {
                            name: '洛可可白',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            name: '翡冷翠',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            name: '羽纱紫',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                    ]
                },
                {
                    id: 2,
                    name: '版本',
                    list: [
                        {
                            name: '8GB+256GB',
                            id: 100016015122,
                            active: true,
                            disable: false
                        },
                        {
                            name: '12GB+256GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                        {
                            name: '12GB+512GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                    ]
                },
            ]
        },
        {
            type: 'HUAWEI',
            imgUrl:
                'https://img14.360buyimg.com/n0/jfs/t1/154612/40/32955/92248/646f12a5Fc0ef7298/e500dba8829836ba.jpg',
            title: 'HUAWEI Mate 50 直屏旗舰 超光变XMAGE影像 北斗卫星消息 低电量应急模式 256GB冰霜银华为鸿蒙手机',
            price: ' 5499.00',
            shopDesc: '自营',
            delivery: '厂商配送',
            shopName: '华为京东自营旗舰店>',
            shopTag: '2万+条评论 97%好评',
            proList: ['超光变影像', '北斗卫星消息', '鸿蒙3.0'],
            goods: {
                skuId: '6', // 商品信息展示区，商品编号
                price: "5499.00", // 商品信息展示区，商品价格
                imagePath: 'https://img14.360buyimg.com/n0/jfs/t1/154612/40/32955/92248/646f12a5Fc0ef7298/e500dba8829836ba.jpg'
            },
            sku: [
                {
                    id: 6,
                    name: '颜色',
                    list: [
                        {
                            name: '耀金黑',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            name: '冰霜银',
                            id: 100016015112,
                            active: true,
                            disable: false
                        },
                        {
                            name: '流光紫',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                        {
                            name: '昆仑破晓',
                            id: 100016015112,
                            active: false,
                            disable: false
                        },
                    ]
                },
                {
                    id: 2,
                    name: '版本',
                    list: [
                        {
                            name: '128GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                        {
                            name: '256GB',
                            id: 100016015122,
                            active: true,
                            disable: false
                        },
                        {
                            name: '512GB',
                            id: 100016015122,
                            active: false,
                            disable: false
                        },
                    ]
                },
            ]
        }
    ]
});
const showSku = function (item) {
    data.goods = item.goods;
    data.sku = item.sku;
    base.value = true;
}
// 底部操作按钮触发
const userRouter = useRouter()
const clickBtnOperate = (op) => {
    updateOrder(data.goods)
    updateOrderNum(parseInt(op.value))
    updateTotalPrice(orderNum.value * data.goods.price.toString())
    console.log(data.goods.skuId)
    updateProdct(state.list[data.goods.skuId])

    userRouter.push('/addressList')
    // console.log(data.goods.price * op.value)
}
// 关闭商品规格弹框
const close = () => {
}
const selectSku = (item) => {
    const {sku, skuIndex, parentIndex} = item;
    if (parentIndex === 1) {
        data.goods.price = data.sku[parentIndex].list[skuIndex].price;
    }
    if (parentIndex === 0) {
        data.goods.imagePath = data.sku[parentIndex].list[skuIndex].imagePath;
    }
    data.sku[parentIndex].list.forEach((s) => {
        s.active = !s.id === sku.id;
    });
    data.sku[parentIndex].list[skuIndex].active = true;
}

</script>

<template>
    <nut-tabs v-model="state.tab1value">
        <nut-tab-pane v-for="type in state.type" :key="type" :title="type">
            <div class="card" v-for="item in state.list" v-show="item.type === type" @click="showSku(item)">
                <nut-card
                    :img-url="item.imgUrl"
                    :title="item.title"
                    :price="item.price"
                    :vipPrice="item.vipPrice"
                    :shopDesc="item.shopDesc"
                    :delivery="item.delivery"
                    :shopName="item.shopName"
                >
                    <template #shop-tag>
                        <div>{{ item.shopTag }}</div>
                    </template>
                    <template #prolist>
                        <div class="search_prolist_attr">
                            <div v-for="word in item.proList">
                                <span class="word">{{ word }}</span>
                            </div>
                        </div>
                    </template>
                    <template #origin>
                        <img
                            class="tag"
                            src="https://img11.360buyimg.com/jdphoto/s58x28_jfs/t9451/359/415622649/15318/b0943e5d/59a78495N3bd2a9f8.png"
                            alt=""
                        />
                    </template>
                </nut-card>
            </div>
        </nut-tab-pane>
    </nut-tabs>
    <nut-sku
        v-model:visible="base"
        :sku="data.sku"
        :goods="data.goods"
        @clickBtnOperate="clickBtnOperate"
        @close="close"
        @selectSku="selectSku"
    ></nut-sku>
</template>

<style scoped lang="less">
.card {
    padding-bottom: 10px;

    .tag {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        margin-left: 2px;
        height: 14px;
    }

    .search_prolist_attr {
        margin: 3px 0 1px;
        height: 15px;
        overflow: hidden;

        .word {
            float: left;
            padding: 0 5px;
            border-radius: 1px;
            font-size: 10px;
            height: 15px;
            line-height: 15px;
            color: #999;
            background-color: #f2f2f7;
            margin-right: 5px;
        }
    }
}
</style>
